<template>
	<scroll-view class="backview" bounces="false" @click="clicked">
		<lexiconNavVue title="答题详情" />
		<view class="content-back">
			<input v-model="inputValue" type="password" style="width: 300px; height: 80px; background-color: gray;"
				:focus='focusState' :auto-blur="false" :show-confirm-bar="false" @input="inputChange"
				@confirm="enterClicked" @keydown.enter="enterClicked" inputmode="none"> </input>
			<input v-model="inputValue1" type="password" style="width: 300px; height: 80px; background-color: gray;"
				:focus='focusState2' :auto-blur="false" :show-confirm-bar="false" @input="inputChange"
				@confirm="enterClicked" @keydown.enter="enterClicked" inputmode="none"> </input>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				focusState: true,
				focusState2: false,
				inputValue: '',
				inputValue1: '',
			}
		},
		onLoad() {},
		mounted() {},
		methods: {
			clicked() {
				this.focusState = !this.focusState;
				this.focusState2 = !this.focusState2;
			},
			inputChange: function(event) {
				var value = event.target.value;
				var that = this;
				console.log('value1111========', value);
				if (value.length == 1) {
					console.log('this.value================', value);
					this.processingValue(value);
				}
				setTimeout(function() {
					that.inputValue = '';
					that.inputValue1 = '';
				}, 10);
			},
			// enter 点击事件
			enterClicked() {
				uni.hideKeyboard(); //隐藏软键盘	
				if (this.focusState == true) {
					this.focusState = false;
					this.$nextTick(function() {
						this.focusState2 = true;
					});
				} else {
					this.focusState2 = false;
					this.$nextTick(function() {
						this.focusState = true;
					});
				}
				this.processingValue('Enter')
			},
			// 处理点击回调
			processingValue(value) {
				var that = this;
			},
		}
	}
</script>

<style>
	.backview {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: #fff7dd;
	}

	.content-back {
		width: 100vw;
		height: 100%;
		/* 	position: absolute;
		top: -100000000px; */
	}
</style>